<template>
    <!-- 人员管理-智能安全帽-轨迹回放 -->
    <div class="empGps">
        <div class="leftBox">
            <div class="top">
                <div class="content"></div>
                <div class="ipt">
                    <Input
                        search
                        enter-button
                        placeholder="请输入工人姓名"
                        style="width: 300px"
                        @on-search="onSecach"
                        @on-enter="onSecach"
                        v-model="keyWord"
                        clearable
                    />
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none"
                    />
                </div>
            </div>
            <div class="bottom">
                <div class="treebox" v-if="EmpList.length > 0">
                    <el-tree
                        :data="EmpList"
                        ref="treeBox"
                        node-key="id"
                        :render-content="renderContent"
                        :expand-on-click-node="false"
                        :highlight-current="true"
                        :default-expanded-keys="[checkId]"
                        @node-click="handleNodeClick"
                    ></el-tree>
                </div>
                <div v-else class="no_data">暂无数据</div>
            </div>
        </div>
        <div class="map">
            <div class="gps" id="gps"></div>
            <div class="time" v-if="imgFlag"></div>
            <div class="list" v-if="imgFlag">
                <div class="play">
                    <img
                        src="./../../assets/images/emp/gps/start.png"
                        alt
                        v-if="playFlag"
                        @click="start"
                    />
                    <img
                        src="./../../assets/images/emp/gps/pause.png"
                        alt
                        v-if="!playFlag"
                        @click="pause"
                    />
                </div>
                <div class="slider">
                    <div
                        class="item"
                        style="
                            width: 95%;
                            margin: 5px auto;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                        "
                    >
                        <el-slider
                            v-model="slider"
                            style="width: 100%"
                            :format-tooltip="timestepToolTip"
                            :step="step"
                            :max="max"
                            @change="getSecond"
                        ></el-slider>
                    </div>
                    <div class="tip">
                        <div class="p1">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="p2"></div>
                        <div class="p3">
                            <span>0:00</span>
                            <span>3:00</span>
                            <span style="margin-left: 10px">6:00</span>
                            <span style="margin-left: 10px">9:00</span>
                            <span style="margin-left: 3px">12:00</span>
                            <span style="margin-left: 10px">15:00</span>
                            <span style="margin-left: 10px">18:00</span>
                            <span style="margin-left: 10px">21:00</span>
                            <span>24:00</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="data_pick" v-if="imgFlag">
                <div class="arrow_left" @click="prevFn">
                    <Icon type="md-arrow-dropleft" />
                </div>
                <div class="time_center">
                    <DatePicker
                        placement="bottom"
                        type="date"
                        :options="options"
                        :editable="false"
                        :clearable="false"
                        placeholder="请选择日期"
                        style="width: 100%"
                        format="yyyy-MM-dd"
                        v-model="day"
                        @on-change="getData"
                    ></DatePicker>
                </div>
                <div class="arrow_right" v-show="!timeFlag" @click="nextFn">
                    <Icon type="md-arrow-dropright" />
                </div>
                <div class="arrow_right" v-show="timeFlag">
                    <Icon
                        type="md-arrow-dropright"
                        style="color: #eee; cursor: not-allowed"
                    />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { format, formatSeconds, closest } from "@/sever/utils.js";
import {
    getIndexEmpList,
    getPersonnelGps,
    getFenceListByEmpId,
    getHelmetEmpList,
} from "@/api/api.js";
export default {
    data() {
        return {
            deptId: "",
            map: "",
            keyWord: "",
            EmpList: [],
            empId: "",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                },
            },
            day: format(new Date(), "YYYY-MM-DD"),
            maxDate: format(new Date(), "YYYY-MM-DD"),
            slider: [0, 86400],
            imgFlag: false,
            id: "",
            times: "00:00:00",
            markList: [],
            list: [],
            time1: null,
            step: 30,
            max: 86400,
            playFlag: false,
            markers: "",
            time: "",
            playbackList: [],
            icon: "",
            gpsList: [],
            lineArr: [],
            polyline: "",
            lat: "",
            lng: "",
            polygonList: [],
            polygonArray: [],
            checkId: "",
            timeFlag: true,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.map.remove(this.markers); //清楚地图上的Markers
                this.lineArr = []; // 清楚轨迹
                this.lat = val.lat;
                this.lng = val.lng;
                this.keyWord = "";
                this.pause();
                this.imgFlag = false;
                this.getEmpList();
                this.getMap([]);
            }
        },
    },
    beforeDestroy() {
        if (this.time1) {
            clearInterval(this.time1); // 在Vue实例销毁前，清除定时器
        }
    },
    methods: {
        handleNodeClick(data, node, e) {
            if (data.children && data.children.length > 0) {
                node.expanded = !node.expanded;
            }
        },
        prevFn() {
            this.day = format(
                new Date(new Date(this.day).getTime() - 86400000),
                "YYYY-MM-DD"
            );
            this.timeFlag = false;
            this.getEmpGpsDetails();
        },
        nextFn() {
            if (isNaN(this.day) && !isNaN(Date.parse(this.day))) {
                this.day = format(
                    new Date(new Date(this.day).getTime() + 86400000),
                    "YYYY-MM-DD"
                );
            } else {
                this.day = format(
                    new Date(this.day.getTime() + 86400000),
                    "YYYY-MM-DD"
                );
            }
            if (this.day == this.maxDate) {
                this.timeFlag = true;
            }
            this.getEmpGpsDetails();
        },
        renderContent(h, { root, node, data }) {
            if (data.children && data.children.length > 0) {
                return (
                    <span class="custom-tree-title">
                        <span class="title">{data.label}</span>
                        <span class="title">({data.total})</span>
                    </span>
                );
            } else {
                return (
                    <span
                        class={
                            this.empId == data.id
                                ? "custom-tree-actvie custom-tree-sub"
                                : "custom-tree-sub"
                        }
                        on-click={() => this.getEmpGps(data, node)}
                    >
                        <img src={data.icon} />
                        <span class="title name">{data.label}</span>
                        <span class="title">{data.workTypeName}</span>
                        <i class="el-icon-arrow-right"></i>
                    </span>
                );
            }
        },
        timestepToolTip(index) {
            this.time = index;
            this.times = formatSeconds(this.time);
            return this.times;
        },
        getMap(data) {
            this.lat =
                this.$store.state.porjectObject.lat == undefined
                    ? 30.592335
                    : this.$store.state.porjectObject.lat;
            this.lng =
                this.$store.state.porjectObject.lng == undefined
                    ? 114.29484
                    : this.$store.state.porjectObject.lng;
            this.map = new AMap.Map("gps", {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 13,
                center: [this.lng, this.lat],
                // layers: [
                //     // 卫星
                //     new AMap.TileLayer.Satellite(),
                //     // 路网
                //     new AMap.TileLayer.RoadNet()
                // ]
            });
            var _that = this;
            _that.polyline = new AMap.Polyline({
                map: _that.map,
                path: this.lineArr,
                showDir: true,
                strokeColor: "#1891FF", //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 4, //线宽
                // strokeStyle: "solid"  //线样式
            });
            if (data.length > 0) {
                //初始位置
                _that.markers = new AMap.Marker({
                    map: _that.map,
                    icon: new AMap.Icon({
                        image: _that.icon,
                        size: new AMap.Size(32, 32), //图标大小
                        imageSize: new AMap.Size(32, 32),
                    }),
                    position: [data[0].lng, data[0].lat],
                    offset: new AMap.Pixel(-13, -30),
                });
                _that.markers.setLabel({
                    offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                    content:
                        "<div class='in_fo in_fo0' >" + data[0].time + "</div>", //设置文本标注内容
                    direction: "top", //设置文本标注方位
                });
            } else {
                for (let item = 0; item < this.polygonArray.length; item++) {
                    this.map.remove([this.polygonArray[item]]);
                }
                this.polygonArray = [];
            }
            this.getFence();
            var mouseTool = new AMap.MouseTool(this.map);
            this.map.setFitView();
        },
        getMarkList(time, t) {
            this.markList = [];
            if (this.playbackList.length > 0) {
                for (let i in this.playbackList) {
                    this.playbackList[i]["times"] =
                        parseInt(
                            this.playbackList[i].time.substring(11, 13) * 3600
                        ) +
                        parseInt(
                            this.playbackList[i].time.substring(14, 16) * 60
                        ) +
                        parseInt(this.playbackList[i].time.substring(17, 19));
                }
                var obj = closest(this.playbackList, time);
                let obj1 = {
                    lng: obj.lng,
                    lat: obj.lat,
                    time: obj.time,
                };
                this.markList.push(obj1);
            }
            this.addMarker(this.markList, t);
        },
        addMarker(markList, t) {
            var _that = this;
            let s = t ? t : 1000;
            _that.markers.moveTo([markList[0].lng, markList[0].lat], s);
            _that.markers.setLabel({
                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                content:
                    "<div class='in_fo in_fo0' >" + markList[0].time + "</div>", //设置文本标注内容
                direction: "top", //设置文本标注方位
            });
            _that.polyline = new AMap.Polyline({
                map: _that.map,
                path: this.lineArr,
                showDir: true,
                strokeColor: "#1891FF", //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 4, //线宽
                // strokeStyle: "solid"  //线样式
            });
            _that.markers.setMap(this.map);
        },
        onSecach() {
            this.getEmpList();
        },
        getEmpList() {
            this.EmpList = [];
            let params = {
                deptId: this.deptId,
                keyword: this.keyWord,
            };
            getHelmetEmpList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.EmpList = [];
                        for (let i = 0; i < res.data.list.length; i++) {
                            let obj = {
                                id: "g" + res.data.list[i].groupId,
                                label: res.data.list[i].groupName,
                                total: res.data.list[i].total,
                                children: [],
                            };
                            this.EmpList.push(obj);
                        }
                        for (let i = 0; i < this.EmpList.length; i++) {
                            for (let j = 0; j < res.data.list.length; j++) {
                                if (
                                    this.EmpList[i].id ==
                                    "g" + res.data.list[j].groupId
                                ) {
                                    for (
                                        let s = 0;
                                        s < res.data.list[j].empList.length;
                                        s++
                                    ) {
                                        let obj = {
                                            id: res.data.list[j].empList[s]
                                                .empId,
                                            label: res.data.list[j].empList[s]
                                                .empName,
                                            workTypeName:
                                                res.data.list[j].empList[s]
                                                    .workTypeName,
                                            icon: res.data.list[j].empList[s]
                                                .iconUrl,
                                            lat: res.data.list[j].empList[s]
                                                .lat,
                                            lng: res.data.list[j].empList[s]
                                                .lng,
                                        };
                                        this.EmpList[i].children.push(obj);
                                    }
                                }
                            }
                        }
                        this.checkId = this.EmpList[0].id;
                        // this.obj = this.EmpList[0].children[0];
                        this.empId = this.EmpList[0].children[0].id;
                        this.lng = this.EmpList[0].children[0].lng;
                        this.lat = this.EmpList[0].children[0].lat;
                        this.imgFlag = false;
                        this.slider = 0;
                        this.day = format(new Date(), "YYYY-MM-DD");
                        this.map.remove(this.polyline);
                        this.pause();
                        this.icon = this.EmpList[0].children[0].icon;
                        this.getEmpGpsDetails();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getFence() {
            for (let item = 0; item < this.polygonArray.length; item++) {
                this.map.remove([this.polygonArray[item]]);
            }
            this.polygonArray = [];
            let params = {
                empId: this.empId,
            };
            getFenceListByEmpId(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.polygonList = res.data.list;
                        if (this.polygonList.length > 0) {
                            for (let i = 0; i < this.polygonList.length; i++) {
                                if (this.polygonList[i].type == 1) {
                                    let path = [];
                                    for (
                                        let j = 0;
                                        j <
                                        this.polygonList[i].polygonPointList
                                            .length;
                                        j++
                                    ) {
                                        //多边形的坐标点
                                        let x = [
                                            this.polygonList[i]
                                                .polygonPointList[j].lng,
                                            this.polygonList[i]
                                                .polygonPointList[j].lat,
                                        ];
                                        path.push(x);
                                    }
                                    this.polygonArray.push(
                                        new AMap.Polygon({
                                            path: path,
                                            strokeColor: "#F59A23",
                                            strokeWeight: 6,
                                            strokeOpacity: 0.2,
                                            fillOpacity: 0.4,
                                            fillColor: "#F59A23",
                                            zIndex: 50,
                                        })
                                    );
                                } else if (this.polygonList[i].type == 2) {
                                    this.polygonArray.push(
                                        new AMap.Circle({
                                            center: [
                                                this.polygonList[i].centerPoint
                                                    .lng,
                                                this.polygonList[i].centerPoint
                                                    .lat,
                                            ], //圆心
                                            radius: this.polygonList[i].radius, //半径
                                            borderWeight: 3,
                                            strokeColor: "#F59A23",
                                            strokeOpacity: 1,
                                            strokeWeight: 6,
                                            strokeOpacity: 0.2,
                                            fillOpacity: 0.4,
                                            strokeStyle: "dashed",
                                            strokeDasharray: [10, 10],
                                            // 线样式还支持 'dashed'
                                            fillColor: "#F59A23",
                                            zIndex: 50,
                                        })
                                    );
                                }
                            }
                        }
                        for (
                            let item = 0;
                            item < this.polygonArray.length;
                            item++
                        ) {
                            this.map.add([this.polygonArray[item]]);
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getEmpGps(item, node) {
            this.empId = item.id;
            this.lng = item.lng;
            this.checkId = item.id;
            this.lat = item.lat;
            this.imgFlag = false;
            this.slider = 0;
            this.day = format(new Date(), "YYYY-MM-DD");
            this.map.remove(this.polyline);
            this.pause();
            this.icon = item.icon;
            this.getEmpGpsDetails();
        },
        getEmpGpsDetails(item) {
            let params = {
                date: this.day,
                empId: this.empId,
            };
            getPersonnelGps(params)
                .then((res) => {
                    if (res.code == 200) {
                        if (res.data.list.length === 0) {
                            this.$Message.warning("暂无轨迹");
                        }
                        this.imgFlag = true;
                        this.playbackList = res.data.list;
                        this.gpsList = res.data.list;
                        this.lineArr = [];
                        this.markList = [];
                        for (let i in this.gpsList) {
                            let arr = [
                                this.gpsList[i].lng,
                                this.gpsList[i].lat,
                            ];
                            this.lineArr.push(arr);
                        }
                        if (this.playbackList.length > 0) {
                            this.slider =
                                parseInt(
                                    this.playbackList[0].time.substring(
                                        11,
                                        13
                                    ) * 3600
                                ) +
                                parseInt(
                                    this.playbackList[0].time.substring(
                                        14,
                                        16
                                    ) * 60
                                );
                            this.playbackList.forEach((i) => {
                                let obj = {
                                    lng: i.lng,
                                    lat: i.lat,
                                    time: i.time,
                                };
                                this.markList.push(obj);
                            });
                        } else {
                            this.markList = [];
                        }
                        this.getMap(this.markList);
                    } else {
                        /* 错误请求阻止 */
                        // this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        start() {
            this.playFlag = false;
            this.time1 = setInterval(() => {
                this.slider += this.step;
                this.getMarkList(this.slider);
            }, 1000);
        },
        pause() {
            this.playFlag = true;
            clearInterval(this.time1);
        },
        getSecond() {
            this.pause();
            let t = 100000;
            this.getMarkList(this.time, t);
        },
        getData(index) {
            this.day = index;
            if (index == this.maxDate) {
                this.timeFlag = true;
            } else {
                this.timeFlag = false;
            }
            this.slider = 0;
            this.pause();
            this.getEmpGpsDetails();
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        // this.lat  = this.$store.state.porjectObject.lat;
        // this.lng = this.$store.state.porjectObject.lng;
        this.getMap([]);
        this.getEmpList();
    },
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
.empGps {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #f5f5f5;
    .leftBox {
        width: 330px;
        height: 100%;
        background: #fff;
        border-radius: 10px;
        .title {
            font-size: 14px;
            margin-left: 20px;
        }
        .top {
            width: 100%;
            height: auto;
            .ipt {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 70px;
                border-bottom: 1px solid #bfbfbf;
            }
        }
        .bottom {
            width: 100%;
            // height: auto;
            height: calc(100% - 90px);
            .treebox {
                width: 300px;
                margin: 0 auto;
                list-style: none;
                height: calc(100% - 10px);
                overflow-y: scroll;
                margin-top: 10px;
            }
            .treebox::-webkit-scrollbar {
                display: none;
            }
            /*兼容火狐*/
            .treebox {
                scrollbar-width: none;
            }
            /* 兼容IE10+ */
            .treebox {
                -ms-overflow-style: none;
            }
            .no_data {
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 16px;
            }
        }
    }
    .map {
        flex: 1;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 10px;
        #gps {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
        .data_pick {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 200px;
            height: 30px;
            z-index: 99;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: var(--themeColor);
            border: 1px solid var(--themeColor2);
            width: 200px;
            height: 42px;
            background: #ffffff;
            border-radius: 3px;
            .arrow_left,
            .arrow_right {
                width: 30px;
                height: 42px;
                text-align: center;
                line-height: 42px;
                font-size: 24px;
                cursor: pointer;
            }
            .time_center {
                flex: 1;
                height: 42px;
                border-left: 1px solid var(--themeColor2);
                border-right: 1px solid var(--themeColor2);
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                /deep/.ivu-input {
                    border: none;
                    border-right-color: none;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    padding: 0;
                    color: var(--themeColor);
                    cursor: pointer;
                    &:active {
                        outline: none;
                    }
                    &:focus {
                        border-color: none;
                        box-shadow: none;
                    }
                }
                /deep/.ivu-select-dropdown {
                    top: 40px !important;
                }
                /deep/.ivu-select-dropdown {
                    color: #515a6e;
                }
                /deep/.ivu-icon {
                    display: none;
                }
            }
        }
    }

    /deep/.el-tree-node__content {
        height: 50px !important;
        background: #f1f5fd;
        margin-bottom: 5px !important;
        padding-left: 0 !important;
        position: relative;
    }
    /deep/.el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        background: #f1f5fd !important;
    }
    /deep/.el-tree-node__expand-icon {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f1f5fd !important;
    }
    /deep/.custom-tree-title {
        width: 95%;
        height: 50px;
        margin-left: 5%;
        font-size: 14px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #424242;
        background: #f1f5fd !important;
    }
    /deep/.custom-tree-sub {
        width: 300px;
        margin: 0 auto;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #424242;
        position: absolute;
        top: 0;
        left: 0;
        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-left: 30px;
        }
        .title {
            width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .name {
            width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    /deep/.custom-tree-actvie {
        background: var(--themeColor) !important;
        color: #fff !important;
    }
    // .list1 {
    //     height: calc(100% - 40px);
    //     width: calc(100% - 40px);
    //     margin: auto;
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    //     .map {
    //         position: relative;
    //         width: calc(100% - 345px);
    //         height: 100%;
    //         display: flex;
    //         // margin: 0 auto;
    //         align-items: center;
    //         border-radius: 10px;
    //         #gps {
    //             width: 100%;
    //             height: 100%;
    //             border-radius: 10px;
    //         }
    //         .data_pick {
    //             position: absolute;
    //             top: 10px;
    //             right: 10px;
    //             width: 200px;
    //             height: 30px;
    //             z-index: 99;
    //             display: flex;
    //             justify-content: flex-start;
    //             align-items: center;
    //             color: var(--themeColor);
    //             border: 1px solid var(--themeColor2);
    //             width: 200px;
    //             height: 42px;
    //             background: #ffffff;
    //             border-radius: 3px;
    //             .arrow_left,
    //             .arrow_right {
    //                 width: 30px;
    //                 height: 42px;
    //                 text-align: center;
    //                 line-height: 42px;
    //                 font-size: 24px;
    //                 cursor: pointer;
    //             }
    //             .time_center {
    //                 flex: 1;
    //                 height: 42px;
    //                 border-left: 1px solid var(--themeColor2);
    //                 border-right: 1px solid var(--themeColor2);
    //                 display: flex;
    //                 justify-content: center;
    //                 align-items: center;
    //                 flex-direction: column;
    //                 /deep/.ivu-input {
    //                     border: none;
    //                     border-right-color: none;
    //                     width: 100%;
    //                     height: 100%;
    //                     text-align: center;
    //                     padding: 0;
    //                     color: var(--themeColor);
    //                     cursor: pointer;
    //                     &:active {
    //                         outline: none;
    //                     }
    //                     &:focus {
    //                         border-color: none;
    //                         box-shadow: none;
    //                     }
    //                 }
    //                 /deep/.ivu-select-dropdown {
    //                     top: 40px !important;
    //                 }
    //                 /deep/.ivu-select-dropdown {
    //                     color: #515a6e;
    //                 }
    //                 /deep/.ivu-icon {
    //                     display: none;
    //                 }
    //             }
    //         }
    //     }
    //     .leftBox {
    //         width: 330px;
    //         height: 100%;
    //         background: #fff;
    //         border-radius: 10px;
    //         .title {
    //             font-size: 14px;
    //             margin-left: 20px;
    //         }
    //         .top {
    //             width: 100%;
    //             height: auto;
    //             .ipt {
    //                 width: 100%;
    //                 display: flex;
    //                 justify-content: center;
    //                 align-items: center;
    //                 height: 70px;
    //                 border-bottom: 1px solid #bfbfbf;
    //             }
    //         }
    //         .bottom {
    //             width: 100%;
    //             // height: auto;
    //             height: calc(100% - 90px);
    //             .treebox {
    //                 width: 300px;
    //                 margin: 0 auto;
    //                 list-style: none;
    //                 height: calc(100% - 10px);
    //                 overflow-y: scroll;
    //                 margin-top: 10px;
    //             }
    //             .treebox::-webkit-scrollbar {
    //                 display: none;
    //             }
    //             /*兼容火狐*/
    //             .treebox {
    //                 scrollbar-width: none;
    //             }
    //             /* 兼容IE10+ */
    //             .treebox {
    //                 -ms-overflow-style: none;
    //             }
    //             .no_data {
    //                 width: 100%;
    //                 height: 50px;
    //                 line-height: 50px;
    //                 text-align: center;
    //                 font-size: 16px;
    //             }
    //         }
    //     }
    // }
    // .gsp {
    //     flex: 1;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     height: 100%;
    // }
}
.link_active {
    background: #dfdfdf !important;
}
.time {
    width: 100%;
    height: 75px;
    background: rgba(5, 61, 139, 1);
    opacity: 0.24;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.list {
    width: 100%;
    height: 75px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-start;
    .slider {
        width: 90%;
        .tip {
            width: 95%;
            margin: 0 auto;
            div {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
            .p1 {
                span {
                    width: 2px;
                    height: 3px;
                    background: rgba(254, 254, 253, 1);
                }
            }
            .p2 {
                height: 3px;
                border-radius: 1px;
                background: rgba(254, 254, 253, 1);
            }
            .p3 {
                span {
                    color: rgba(254, 254, 253, 1);
                    width: 20px;
                }
            }
        }
    }
    .play {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 1%;
        cursor: pointer;
    }
}

/deep/.ivu-input-group {
    border-radius: 20px;
}
/deep/.ivu-input-group .ivu-input {
    border-radius: 20px 0 0 20px;
    border-color: #ebf2f8;
    background: #ebf2f8;
}
/deep/.ivu-input-group-append {
    border-radius: 0 20px 20px 0;
}
/deep/.el-tag.el-tag--success {
    background-color: #e7f8f2;
    border-color: #28d79c;
    color: #3fcf77;
}
/deep/.el-tag {
    border-radius: 2px;
}
/deep/.ivu-select-selection {
    border-radius: 2px;
}
</style>
